<template>
    <a-flex class="container" vertical>
        <a-flex class="header" align="center" justify="center">
            <a-flex vertical gap="middle" justify="center" align="center">
                <a-avatar :size="64" :src="user.avatarUrl">
                    <template #icon>
                        <UserOutlined />
                    </template>
                </a-avatar>
                <a-text style="font-size: 20px;font-weight: bold;">
                    {{user.nickname}}
                </a-text>
                <a-text>
                    {{ user.intro ? user.intro : '这个用户还没有个人描述...' }}
                </a-text>
                <UserFollowBtn :user="user"></UserFollowBtn>
            </a-flex>
        </a-flex>
        <a-tabs v-model:activeKey="activeKey" class="body" centered>
            <a-tab-pane key="1" tab="作品">
                <VideoList ref="videoListRef" :baseOptions="baseOptions"></VideoList>
            </a-tab-pane>
            <a-tab-pane key="3" tab="关注" force-render>
                <UserList :baseOptions="followingsBaseOptions" ref="followingsListRef"></UserList>
            </a-tab-pane>
            <a-tab-pane key="2" tab="粉丝" force-render>
                <UserList :baseOptions="followersBaseOptions" ref="followersListRef"></UserList>
            </a-tab-pane>
            
        </a-tabs>
    </a-flex>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { AntDesignOutlined } from '@ant-design/icons-vue';
import request from '@/script/utils/request'; // 导入Axios实例
const activeKey = ref('1');
import UserFollowBtn from '@/components/user/UserFollowBtn.vue';
import { useRoute } from 'vue-router'
import { message } from 'ant-design-vue';
const route = useRoute()
import VideoList from '@/components/video/VideoList.vue';
import UserList from '@/components/user/UserList.vue';

//获取用户信息
const user = ref({
    "id": null,
    "nickname": null,
    "intro": null,
    "avatarUrl": null,
    "sex": null,
    "follow": null,
    "fansCount": "-"
})

//用户作品
const baseOptions = ref({
  url: null,
  params: {
    // sortBy: null,
    // publishTimeRange: [null, null],
    // durationRange: [null, null],
    // categoryId: null,
  }
})
const videoListRef = ref(null)

//用户关注者
const followersBaseOptions = ref({
  url: null,
  params: {
    // sortBy: null,
    // publishTimeRange: [null, null],
    // durationRange: [null, null],
    // categoryId: null,
  }
})
const followersListRef = ref(null)

//用户关注的用户
const followingsBaseOptions = ref({
  url: null,
  params: {
    // sortBy: null,
    // publishTimeRange: [null, null],
    // durationRange: [null, null],
    // categoryId: null,
  }
})
const followingsListRef = ref(null)

onMounted(async () => {
    console.log('mounted')
    try {
        //获取用户信息
        const userResponse = await request.get(`/user/${route.params.userId}/profile`)
        user.value = userResponse.data;

        //加载作品列表
        baseOptions.value.url = '/video/list/by-user/' + user.value.id;
        videoListRef.value.load()

        //获取用户的粉丝
        followersBaseOptions.value.url = `/user/${user.value.id}/followers`;
        followersListRef.value.load()
        console.log('x1', followersListRef);
        


        //获取用户关注的用户
        followingsBaseOptions.value.url = `/user/${user.value.id}/followings`;
        console.log('x2', followingsListRef);
        followingsListRef.value.load()


    } catch (e) {
        message.warning(e.message)
    } finally {
        
    }

})

</script>
<style scoped>
.container {
    max-width: 800px;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 20px;
    overflow: hidden;

    .header {
        background-image: url("/src/assets/profile_background.avif");
        padding: 20px;
    }

    .body {
        padding: 20px;
        padding-top: 0;
    }
}
</style>